<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/ui/elements/components/expandable-card.html">
<link rel="import" href="/ui/elements/flake_detection/flake-occurrence.html">


<dom-module id="grouped-occurrences">
  <template>
    <style>
      flake-occurrence {
        display: table-row;
      }

      flake-occurrence:nth-child(odd) {
        background-color: #FFF;
      }

      flake-occurrence:nth-child(even) {
        background-color: #E8F0FE;
      }

      table {
        border-collapse: collapse;
      }

    </style>
      <!-- Expanded by default. -->
        <expandable-card collapsed=[[collapsed]]>
          <div slot="expandable-card-header" class="header">
            <b><font size="4">[[group_by_field]] ([[grouped_occurrences.length]] occurrences)</font></b>
          </div>
          <div slot="expandable-card-content">
              <table width="100%">
                <template is="dom-repeat" items="[[grouped_occurrences]]" as="occurrence">
                  <flake-occurrence occurrence_json=[[occurrence]]></flake-occurrence>
                </template>
              </table>
          </div>
        </expandable-card>
  </template>
  <script>
    (function () {
      "use strict";

      Polymer({
        is: "grouped-occurrences",
        properties: {
          // Occurrences in one group.
          group_by_field:{
            type: String
          },
          grouped_occurrences: {
            type: Array
          },
          collapsed: {
            type: Boolean,
            value: false
          }
        },

      });
    })();
  </script>
</dom-module>
